웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
[React] 함수형 컴포넌트 에서 props를 사용하기, Functional Component
Last Modified : 2020-10-16 / Created : 2020-07-06React 앱 개발시 클래스형, 함수형, 배열형 컴포넌트를 생성하고 사용하죠. 이 때 함수형 컴포넌트에서 Props를 전달 받아 사용하는 방법에 대하여 알아봅니다.
당연히 가능합니다. 컴포넌트에서 부모와 자식 사이의 데이터를 전달하기 위한 다양한 방법 중 Props는 여전히 많이 사용되는 방법입니다.
(@ Tips)
다만 다른 프론트엔드 프레임워크와 달리 Props 사이의 데이터 흐름이 양방향(Two ways)가 아니므로 업데이트를 컴포넌트 사이에 전달하기에 필요한 부분이 존재하죠. 양방향은 편리한 만큼 성능 상의 이슈가 존재하는 단점이 있죠.
이런 부분은 알고 가면 좋겠죠. 그럼 아래에서 함수형 컴포넌트를 생성하고 Props를 전달하는 예제를 만들어보죠.
일단 함수형 컴포넌트를 만들어봅니다.
빈 컴포넌트가 만들어졌습니다. 클래스형 컴포넌트라면 class를 선언할 때 constructor()를 통해 props와 state를 선언하지만 함수형은 class 타입이 아니므로 constuctor를 사용하지 않습니다. 다만 아래와 같이 함수의 인자로 props를 넘겨줄 수 있죠.
보시는 것처럼 인자로 props를 받아 사용하였습니다. 만약 prop.name을 출력한다면 아래처럼 return해주면 됩니다.
여기까지 React Functional component에서 props를 어떻게 사용하는지 알아봤습니다.
! 함수형에서 Props 전달이 가능할까?
당연히 가능합니다. 컴포넌트에서 부모와 자식 사이의 데이터를 전달하기 위한 다양한 방법 중 Props는 여전히 많이 사용되는 방법입니다.
(@ Tips)
다만 다른 프론트엔드 프레임워크와 달리 Props 사이의 데이터 흐름이 양방향(Two ways)가 아니므로 업데이트를 컴포넌트 사이에 전달하기에 필요한 부분이 존재하죠. 양방향은 편리한 만큼 성능 상의 이슈가 존재하는 단점이 있죠.
이런 부분은 알고 가면 좋겠죠. 그럼 아래에서 함수형 컴포넌트를 생성하고 Props를 전달하는 예제를 만들어보죠.
# 함수형 컴포넌트 Props 전달하기 예제
일단 함수형 컴포넌트를 만들어봅니다.
import React from 'react';
const myComponent = () => {
}
export default myComponent;
const myComponent = () => {
}
export default myComponent;
빈 컴포넌트가 만들어졌습니다. 클래스형 컴포넌트라면 class를 선언할 때 constructor()를 통해 props와 state를 선언하지만 함수형은 class 타입이 아니므로 constuctor를 사용하지 않습니다. 다만 아래와 같이 함수의 인자로 props를 넘겨줄 수 있죠.
const myComponent = (props) => {
const name = prop.name;
}
const name = prop.name;
}
보시는 것처럼 인자로 props를 받아 사용하였습니다. 만약 prop.name을 출력한다면 아래처럼 return해주면 됩니다.
const myComponent = (props) => {
const name = prop.name;
return (
{ name }
)
}
const name = prop.name;
return (
{ name }
)
}
여기까지 React Functional component에서 props를 어떻게 사용하는지 알아봤습니다.
아래의 글도 찾고 계시지 않나요?
